<template>
	<view class="content">
		<Header title="商家主页"></Header>
		<!-- 店铺信息 -->
		<view class="shop-info">
			<view class="left">
				<u--image :src="shopInfo.logo | setImgUrl" width="165rpx" height="165rpx"
					mode="aspectFill">
					<view slot="error" style="font-size: 24rpx;">加载失败</view>
				</u--image>
			</view>
			<view class="center">
				<u--text class="title" :lines="1" :text="shopInfo.shop_name"></u--text>
				<view class="type" v-if="index != 1">
					<text v-for="(item,index) in shopInfo.labelList" :key="index">{{item}}</text>
				</view>
			</view>
			<image src="../../static/scan.png" class="right" mode="" @click="scan()"></image>
		</view>
		<!-- 核销统计 -->
		<view class="verifier-box">
			<view class="header">
				<text>核销统计</text>
				<text class="num">总核销:{{writeoffNum || 0}}张</text>
			</view>
			<view class="verifier-list">
				<!-- 列表 -->
				<view class="verifier-item" v-for="(item,index) in writeoffList" :key="index">
					<view class="shop-name">
						{{item.shop_name}}
					</view>
					<view class="verifier-content">
						<view class="left">
							<u--image :src="item.goods_image | setImgUrl" width="92rpx" height="92rpx"
								mode="aspectFill">
								<view slot="error" style="font-size: 24rpx;"></view>
							</u--image>
						</view>
						<view class="right">
							<view class="top">
								<view class="title">{{item.goods_name}}</view>
							</view>
						</view>
						<view class="price-box">
							<view class="price">
								¥ {{item.price}}
							</view>
							<view class="num">
								x1
							</view>
							<view class="total">
								实付：¥ {{item.price}}
							</view>
						</view>
					</view>
				</view>
				<!-- 空 -->
				<view class="empty" v-if="!writeoffList.length">
					<image src="../../static/empty.png" style="width: 304rpx;height: 194rpx;" mode=""></image>
				</view>
			</view>
		</view>
		<view class="btn-group">
			<view class="service" @click="call()">
				<image src="../../static/back.png" style="width: 56rpx;height: 54rpx;margin-right: 20rpx;" mode="">
				</image>
				<text>退出登录</text>
			</view>
			<navigator :url="'/pages/shop/edit?id='+shop_id" hover-class="none">
				<view class="edit">
					编辑门店信息
				</view>
			</navigator>
		</view>
		<!-- 联系客服 -->
		<u-popup :show="show" :round="10" mode="center" @close="show = false">
			<view class="modal-box">
				<view class="modal-title">
					客服电话
				</view>
				<view class="phone">
					{{userInfo.kefu_mobile}}
				</view>
				<view class="call-btn" @click="call()">
					拨打电话
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	export default {
		data() {
			return {
				shop_id: '',
				shopInfo:{},
				writeoffNum:0,
				writeoffList:[],
				show:false,
				userInfo:{}
			}
		},
		components: {
			Header
		},
		onShow() {
			this.shop_id = uni.getStorageSync('shop_id')
			this.getinfo()
			this.getUserInfo()
		},
		methods: {
			// 扫码核验
			scan(){
				uni.scanCode({
					success: (scanRes) => {
						uni.$u.http.post('/shop/scancode', {
							order_sn: scanRes.result
						}).then(res => {
							this.$u.toast('核验成功')
							this.getinfo()
						})
					}
				})
			},
			call(){
				var that = this;
				uni.showModal({
					title: '是否退出登录',
					content: '',
					success: function (res) {
						if (res.confirm) {
							that.logout()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 获取个人信息
			getUserInfo(){
				uni.$u.http.post('/shop/userinfo', ).then(res => {
					this.userInfo = res.data
				})
			},
			getinfo() {
				uni.$u.http.post('/shop/merchanthomepage', {
					shop_id: this.shop_id
				}).then(res => {
					this.writeoffList = res.data.writeoff_list
					this.writeoffNum = res.data.writeoff_num
					this.shopInfo = {
						labelList:res.data.label.split(','),
						logo:res.data.logo,
						shop_name:res.data.shop_name
					}
					
				})
			},
			logout(){
				uni.removeStorageSync('token')
				this.$u.toast('已退出')
				setTimeout(()=>{
					uni.reLaunch({
						url:'/pages/index/index'
					})
				},1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #F2F2F2;
		position: relative;
	}

	.shop-info {
		height: 236rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		padding: 28rpx 22rpx 30rpx 22rpx;

		.left {
			width: 165rpx;
			height: 165rpx;
			border-radius: 24rpx;
			overflow: hidden;
		}

		.center {
			width: 300rpx;
			height: 165rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-top: 12rpx;
			}

			.type {
				font-size: 20rpx;
				font-weight: 400;
				color: #333333;
				margin-top: 16rpx;

				text {
					margin-right: 20rpx;
				}
			}
		}

		.right {
			width: 198rpx;
			height: 72rpx;
		}
	}

	.verifier-box {
		margin-top: 28rpx;
		background: #FFFFFF;

		.header {
			height: 84rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx 24rpx 0rpx 34rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;

			.num {
				font-size: 24rpx;
				color: #FF0000;
			}
		}

		.verifier-list {
			margin-bottom: 130rpx;

			.verifier-item {
				background: #FAFAFA;
				margin-top: 6rpx;

				.shop-name {
					height: 84rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #000000;
					line-height: 84rpx;
					padding-left: 30rpx;
				}

				.verifier-content {
					padding: 34rpx 30rpx 26rpx 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						width: 92rpx;
						height: 92rpx;
						border-radius: 46rpx;
						overflow: hidden;
					}

					.right {
						width: 330rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.top {
							.title {
								font-size: 28rpx;
								font-weight: 400;
								color: #000000;
							}
						}
					}

					.price-box {
						font-size: 24rpx;
						font-weight: 400;
						color: #FF0000;
						text-align: right;

						.num {
							margin-top: 12px;
						}

						.total {
							margin-top: 12px;
							font-size: 28rpx;
							color: #000000;
						}
					}
				}
			}

			.empty {
				width: 750rpx;
				height: 408rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FAFAFA;
			}
		}
	}

	.btn-group {
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		width: 750rpx;
		height: 130rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 28rpx;
		color: #333333;

		.service {
			display: flex;
			align-items: center;
		}

		.edit {
			width: 294rpx;
			height: 84rpx;
			background: #D8D8D8 linear-gradient(136deg, #FFECCA 0%, #E7BC70 100%);
			border-radius: 42rpx;
			line-height: 84rpx;
			text-align: center;
		}
	}
	.modal-box{
		width: 640rpx;
		height: 275rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.modal-title{
			font-size: 48rpx;
			font-weight: bold;
			color: #000000;
			margin-top: 38rpx;
		}
		.phone{
			font-size: 48rpx;
			font-weight: bold;
			color: #666666;
			margin-top: 52rpx;
		}
		.call-btn{
			width: 160rpx;
			height: 72rpx;
			background: #8EB7FF;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(220, 168, 109, 0.45);
			border-radius: 26rpx;
			font-size: 34rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 72rpx;
			margin-top: 70rpx;
		}
	}
</style>
